<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.16/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div id="TL">
        <div style="float: left">
            <el-button type="primary" @click="dialogFormVisible = true">物流公司</el-button>
            <el-input v-model="textName" placeholder="请输入物流公司名称" style="width: 200px;"></el-input>
            <el-button type="primary" @click="selectName">搜索</el-button>
        </div>
        <div style="float:right;">
            <el-input v-model="textNumber" placeholder="请输入物流公司编号" style="width: 200px;"></el-input>
            <el-button type="primary" @click="selectId">搜索</el-button>
        </div>

        <el-dialog title="物流公司" :visible.sync="dialogFormVisible">
            <el-form :model="TLogistic">
                <el-form-item label="物流公司名称">
                    <el-input v-model="TLogistic.logisticsName" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="TLogistic">
                <el-form-item label="负责人">
                    <el-input v-model="TLogistic.principal" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="TLogistic">
                <el-form-item label="联系方式">
                    <el-input v-model="TLogistic.logisticeContact" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="TLogistic">
                <el-form-item label="运营区域">
                    <el-input v-model="TLogistic.area" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="TLogistic">
                <el-form-item label="价格(元/每吨)">
                    <el-input v-model="TLogistic.price" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="TLogistic">
                <el-form-item label="备注">
                    <el-input  type="textarea" v-model="TLogistic.remarks" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveTLogistics">确 定</el-button>
            </div>
        </el-dialog>

        <el-table
                :data="TLogistics"
                :header-cell-style="{textAlign: 'center'}"
                :cell-style="{ textAlign: 'center' }">
            <el-table-column
                    label="物流公司编号">
                <template slot-scope="scope">
                    <span>{{ scope.row.logisticsId }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="物流公司名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.logisticsName }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="负责人">
                <template slot-scope="scope">
                    <span>{{ scope.row.principal }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="联系方式">
                <template slot-scope="scope">
                    <span>{{ scope.row.logisticeContact }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="运营区域">
                <template slot-scope="scope">
                    <span>{{ scope.row.area }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="加入时间">
                <template slot-scope="scope">
                    <span >{{ scope.row.joinTime }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="价格">
                <template slot-scope="scope">
                    <span >{{ scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :pageSize="pageSize"
                :current="current"
                @current-change="loadTLogistics">
        </el-pagination>
    </div>
    <script>
        new Vue({
            el:"#TL",
            data(){
                return{
                    TLogistics:[],//查询所有物流公司
                    total:0,
                    pageSize:10,
                    current:0,
                    textName:'',
                    textNumber:'',
                    TLogistic:{logisticsId:0,logisticsName:"",principal:"",logisticeContact:"",
                                area:"",joinTime:"",price:0,remarks:""},
                    dialogFormVisible:false,
                }
            },
            methods: {
                selectName(){
                    if (this.textName == ''){
                        this.loadTLogistics(1,10);
                    } else {
                        this.loadTextName(1,10);
                    }
                },
                selectId(){
                    if(this.textNumber == ''){
                        this.loadTLogistics(1,10);
                    }else {
                        this.loadTextNumber(1,10);
                    }
                },
                loadTextName(current,pageSize){
                    let name = this.textName;
                    axios.get("/tLogisticsName/" + current + "/" + pageSize + "/" + name)
                        .then(res => {
                            this.TLogistics = res.data.records;
                            this.total = res.data.total;
                            this.current = res.data.current;
                        })
                },
                loadTextNumber(current,pageSize){
                    let Id = this.textNumber;
                    axios.get("/tLogisticsId/" + current + "/" + pageSize + "/" + Id)
                        .then(res => {
                            this.TLogistics = res.data.records;
                            this.total = res.data.total;
                            this.current = res.data.current;
                        })
                },
                loadTLogistics(current,size){
                    axios.get("/tLogistics/" + current + "/" + size)
                        .then(res => {
                            this.TLogistics = res.data.records;
                            this.current = res.data.current;
                            this.pageSize = res.data.pageSize;
                        })
                },
                handleEdit(index, row) {
                    this.TLogistic = JSON.parse(JSON.stringify(row));
                    this.dialogFormVisible = true;
                },
                handleDelete(index, row) {
                    axios.delete("/tLogistics/" + row.logisticsId)
                            .then(res => {
                                if(res.data == "ok"){
                                    this.$message("删除物流公司成功");
                                    this.loadTLogistics(1,10);
                                }
                            })
                },
                saveTLogistics(){
                    let logistics = JSON.parse(JSON.stringify(this.TLogistic));
                    if(logistics.logisticsId == 0){
                        axios.post("/tLogistics",logistics)
                            .then(res => {
                                if(res.data == "ok"){
                                    this.loadTLogistics(1,10);
                                    this.dialogFormVisible = false;
                                }
                            })
                    } else {
                        axios.put("/tLogistics",logistics)
                            .then(res => {
                                if(res.data == "ok"){
                                    this.loadTLogistics(1,10);
                                    this.dialogFormVisible = false;
                                }
                            })
                    }
                }
            },
            mounted(){
                this.loadTLogistics(1,10);
            }
        })
    </script>
</body>
</html>